<template>
	<view class="wrap">
		<view class="wrap-accusation">
			<view class="wrap-accusation-list align-justify-space-between" @click="handleSettingPhone">
				<view class="wrap-accusation-list-l">
					更换手机号
				</view>
				<view class="wrap-accusation-list-r align-center">
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="wrap-accusation-list align-justify-space-between">
				<view class="wrap-accusation-list-l">
					对已见面的人隐藏
				</view>
				<view class="wrap-accusation-list-r align-center">
					<up-switch v-model="haveMetValue" @change="haveMetChange" :size="15" inactiveColor="#999" activeColor="#197DFF"></up-switch>
				</view>
			</view>
			<view class="wrap-accusation-list align-justify-space-between">
				<view class="wrap-accusation-list-l">
					已有交往对象
				</view>
				<view class="wrap-accusation-list-r align-center">
					<up-switch v-model="existingObjectsValue" @change="existingObjectsChange" :size="15" inactiveColor="#999" activeColor="#197DFF"></up-switch>
				</view>
			</view>
			<view class="wrap-accusation-list align-justify-center active">
				<view class="wrap-accusation-list-l">
					退出当前账号
				</view>
			</view>
		</view>
		<up-modal width="460rpx" :show="show" :showCancelButton="true" confirmText="联系管家" cancelText="取消" confirmColor="#006FFF" cancelColor="#006FFF" contentTextAlign="center" title="重新开启个人信息" content='为保证信息真实性，营造良好的相亲环境，请联系管家说明事情真实情况.' @confirm="confirm" @cancel="cancel"></up-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	
	const show = ref(false)
	
	const haveMetValue = ref(false)
	
	const existingObjectsValue = ref(false)
	
	const handleSettingPhone = () => {
		uni.navigateTo({
			url:'/pages/mine/settingPhone'
		})
	}
	
	const haveMetChange = (evt) => {
		console.log(evt)
	}
	
	const existingObjectsChange = (evt) => {
		if(evt){
			show.value = true
		}
	}
	
	const confirm = () => {
		existingObjectsValue.value = true
		show.value = false
	}
	
	const cancel = () => {
		existingObjectsValue.value = false
		show.value = false
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;

		&-accusation {
			margin-bottom: 30rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&-list {
				margin-bottom: 30rpx;
				padding:0 40rpx;
				box-sizing: border-box;
				height: 96rpx;
				font-size: 30rpx;
				background-color: #fff;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				color: #444;
				
				&.active{
					margin-top: 80rpx;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
				}

				&-l {
					color: #444444;
				}

				&-r {
					color: #222222;

					::v-deep .u-icon {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>